@import 'reset'
@import 'mixins'

html, body
  height 100%

body
  font 62.5% 'Helvetica', Arial, sans-serif
  linear-gradient(#34414f, #4c5f72)

h1 
  font-size 2em
  line-height 0.9em
  margin-bottom 0.9em
  font-weight bold
  text-shadow 0px 1px 1px #fff

.login
  width 300px
  height 100px
  background-color #fff
  linear-gradient(#fff, #eee)
  margin -150px 0 0 -165px
  padding 30px
  position absolute
  top 50%
  left 50%
  z-index 0
  border-radius(3px)
  box-shadow(4px 4px 5px rgba(0,0,0,.4))


.login:before
  content ''
  position absolute
  z-index -1
  border 1px dashed #ccc
  top 5px
  bottom 5px
  left 5px
  right 5px
  box-shadow 0 0 0 1px #fff

.login button
  float right
  clear right

.login input
  background none repeat scroll 0 0 #FFFFFF
  border 1px solid #ccc
  border-radius(2px)
  color #777777
  padding 8px
  width 94%
  float left
  margin-bottom 1.8em

button 
  -webkit-user-select none
  display block
  background #3b88d8
  background -moz-linear-gradient(0% 100% 90deg, #377ad0, #52a8e8)
  background -webkit-gradient(linear, 0% 0%, 0% 100%, from(#52a8e8), to(#377ad0))
  border-top 1px solid #4081af
  border-right 1px solid #2e69a3
  border-bottom 1px solid #20559a
  border-left 1px solid #2e69a3
  -moz-border-radius 16px
  -webkit-border-radius 16px
  border-radius 16px
  -moz-box-shadow inset 0 1px 0 0 #72b9eb, 0 1px 2px 0 #b3b3b3
  -webkit-box-shadow inset 0 1px 0 0 #72b9eb, 0 1px 2px 0 #b3b3b3
  color #fff
  font-family "lucida grande", sans-serif
  font-size 11px
  font-weight normal
  line-height 1
  padding 3px 0 5px 0
  text-align center
  text-shadow 0 -1px 1px #3275bc
  width 112px
  -webkit-background-clip padding-box


button:hover 
  background #2a81d7
  background -moz-linear-gradient(0% 100% 90deg, #206bcb, #3e9ee5)
  background -webkit-gradient(linear, 0% 0%, 0% 100%, from(#3e9ee5), to(#206bcb))
  border-top 1px solid #2a73a6
  border-right 1px solid #165899
  border-bottom 1px solid #07428f
  border-left 1px solid #165899
  -moz-box-shadow inset 0 1px 0 0 #62b1e9
  -webkit-box-shadow inset 0 1px 0 0 #62b1e9
  cursor pointer
  text-shadow 0 -1px 1px #1d62ab
  -webkit-background-clip padding-box
  text-decoration none


button:active 
  background #3282d3
  border 1px solid #154c8c
  border-bottom 1px solid #0e408e
  -moz-box-shadow inset 0 0 6px 3px #1657b5, 0 1px 0 0 #fff
  -webkit-box-shadow inset 0 0 6px 3px #1657b5, 0 1px 0 0 #fff
  text-shadow 0 -1px 1px #2361a4
  -webkit-background-clip padding-box

.wrapper
  width 350px
  height 550px
  background-color #fff
  linear-gradient(#fff, #eee)
  margin -300px 0 0 -175px
  padding 10px
  position absolute
  top 50%
  left 50%
  z-index 0
  border-radius(3px)
  box-shadow(4px 4px 5px rgba(0,0,0,.4))

.messages
  float left
  width 350px
  height 500px
  max-height 500px
  background #fff
  position relative
  overflow-y auto
  overflow-x hidden
  box-shadow inset 0 0 1px 1px rgba(0,0,0,.2)

a.show
  position fixed
  linear-gradient(#eee, #999)
  font-size .9em
  color #666
  text-shadow 0px 1px 1px #fff
  margin-top 250px
  margin-left 331px
  padding 10px 8px 10px 5px
  border-top-left-radius 5px
  border-bottom-left-radius 5px
  &:hover
    cursor pointer

p
  margin 10px
  color #777
  font-size 1.2em
  strong
  color #000
  margin-right 4px

.users
  float right
  width 140px
  height 500px
  overflow-x hidden
  position relative
  max-height 500px
  display none

ul
  color green
  list-style-position inside
  font-size 1.2em
  li 
  padding 5px
  span
    color #777

.message-box
  width 350px
  height 50px
  float left
  clear both
  z-index 0
  input
    margin-top 10px
    background none repeat scroll 0 0 #FFFFFF
    border 1px solid #ccc
    border-radius(2px)
    color #777777
    padding 8px
    float left
    width 260px
  button 
    margin-top 15px
    float right
    width 60px

.wrapper
  display none

.wrapper:before
  content ''
  position absolute
  z-index -1
  border 1px dashed #ccc
  top 5px
  bottom 5px
  left 5px
  right 5px
  box-shadow 0 0 0 1px #fff

